<template>
	<view id="page">
		<nav-bar :navH="navH" :isTabar="false" :isHome="false" :pageName="title"></nav-bar>
        <view class="container" style='background-color: #fff; padding-bottom: 50upx;'>
			<view class="store">
				<view class="col-9 lt">
					<image :src="detail.logo" mode="widthFix" lazy-load="true" class='icon' @error="imgError"></image><text>{{detail.store_name}}</text>
					<image src="../../static/4.png" lazy-load="true" class="vip" v-if="detail.grade == 1"></image>
					<image src="../../static/51.png" lazy-load="true" class="vip" v-else-if="detail.grade == 2"></image>
				</view>
				<view class="col-3 rt">
					<view class="btn" v-if="detail.is_attention === 1">已关注</view>
					<view class="btn" @click="setFllow" v-else>关注</view>
				</view>
			</view>
		    <view class="swiper">
				<block v-if="detail.is_video == 1">
					<!-- <video src="{{detail.PlayURL}}" id="video" poster="{{detail.CoverURL}}" show-center-play-btn="{{true}}" objectFit="fill" bindtimeupdate='_playTime' controls wx:if="{{detail.video_type == '1'}}">
					    <cover-view class="controls" wx:if="{{isPay}}">
							<cover-view style='display: block; margin-top:15%;'>该视频为付费视频</cover-view>
							<cover-view style='display: block; margin: 20rpx 0;'>{{detail.money}}元,购买后有效期{{detail.time_out}}天,请尽快观看！</cover-view>
							<button class='btn' bindtap='createOrder'>微信支付</button>
					    </cover-view>
					</video> -->
					<video :src="detail.PlayURL" id="video" :poster="detail.CoverURL" show-center-play-btn="true" objectFit="fill" controls v-if="detail.PlayURL"></video>
				</block>
				<block v-else>
					<swiper autoplay="true" @change="swiperChange" v-if="detail.lunimgs">
						<block v-for="(it, k1) in detail.lunimgs" :key="k1">
							<swiper-item>
								<image :src="it" class="slide-image" mode="widthFix" lazy-load="true" />
							</swiper-item>
						</block>
					</swiper>
					<!--重置小圆点的样式  -->
					<view class="dots">  
						<block v-for="(it, k2) in detail.lunimgs" :key="k2">  
							<view :class="['dot', k2 === currentSwiper ? 'active' : '']"></view>  
						</block>
					</view>
				</block>
		    </view>
			<!-- 详情 -->
		    <view class='detail-cont'>
				<rich-text :nodes="detail.content"></rich-text>
		    </view>
		  <!-- 话题 -->
		    <view class='section topics' v-if="topics.length > 0">
				<block v-for="(it, k2) in topics" :key="k2">
					<view class="i" @click="goTopic(it.id)"><text class="icon">#</text><text>{{it.topic_name}}</text></view>
				</block>
		    </view>
		  <!-- 点赞 -->
		  <view class='setlike' @click="setLike">
			<image src="../../static/53.png" mode="widthFix" lazy-load="true" v-if="detail.is_zan === 1"></image><image src="../../static/52.png" mode="widthFix" lazy-load="true" v-else></image>
		  </view>
		  <!-- 浏览统计 -->
		  <view class="section view-count">
			<view class="i i1"><image src='../../static/14.png' mode="widthFix"></image><text>{{detail.time}}</text></view>
			<view class="i i2"><image src='../../static/view_icon.png' mode="widthFix"></image><text>{{detail.yd_num}}</text></view>
			<view class="i i3"><image src="../../static/nolike_icon.png" mode="widthFix"></image><text class="txt">{{detail.zan}}</text></view>
		  </view>
		  <!-- 点赞头像 -->
		  <view class='section avat' style='margin-bottom: 30upx;'>
			<scroll-view class="scroll-view-x" scroll-x>
			  <view class="scroll-view-item-h" v-for="(it, k3) in zanavts" :key="k3"><image :src="it.user_img" mode="widthFix" lazy-load="true" class="icon" @error="imgError2(k3, 'zan')"></image></view>
			</scroll-view>
		  </view>
		  <!-- 评论区 -->
		  <view class='section comment'>
			<text class="cmt-count">评论</text>
			<view class='drop-cmt' @click='jumpTextarea'><text>您来留下点什么吧！</text></view>
			<view class='section' v-if="hasRes">
			  <view class='section cmt' v-for="(it, k4) in comts" :key="k4">
				<view class='head clearfloat'>
				  <view class='col-9 i'>
					<image :src="it.user_img" class='col-2' mode='widthFix' lazy-load="true" @error="imgError2(k4, 'comt')"></image>
					<view class='col-10 io'><text style='font-size:32upx; color:#333; font-weight: bold;'>{{it.name}}</text><text>{{it.create_time}}</text></view>
				  </view>
				  <!-- <view class='col-4 z'>
					<text style='margin-right:26upx;color:#666;' :data-plid="it.id" :data-bhfid="it.user_id" @click='jumpTextarea'>回复</text>
					<view style='display:inline-block' :data-plid="it.id" :data-bhfid="it.user_id" @click='setPlLike'>
					  <image src="../../resource/images/like_icon.png" wx:if="it.is_zan"></image><image src="../../resource/images/nolike_icon.png" wx:else></image><text class="txt">{{item.zan}}</text>
					</view>
				  </view> -->
				</view>
				<view class='body'>
				  <text class='cont'>{{it.content}}</text>
				  <view class='reply' @click="goComments" v-if="it.son.length > 0"><text style='font-size:32upx; color:#333; font-weight: bold; margin-right: 20upx;'>{{it.son[0].hfname}}</text>等人<text style="color:#448de6; float: right;">共{{it.son.length}}条回复 ></text></view>
				</view>
			  </view>
			  <view class='foot' v-if="total > 0">
				<view @click="goComments">查看全部，共{{total}}条评论 ></view>
			  </view>
			</view>
			<view class="nocont" v-else>暂无评论</view>
		  </view>
		  <!-- 评论框 -->
		  <comt-box :isTextarea="isTextarea" comType='comt' :zxId="detail.id" @refresh="freshComments" @isText="close"></comt-box>
		  <!-- 底部菜单 -->
		  <view class="tools">
			<view class="col-3 chi" @click="goHome"><image src="../../static/15.png" lazy-load="true" class="icon"></image><text>首页</text></view>
			<view class="col-3 chi"><button open-type='share' plain="false" class="share"><image src="../../static/16.png" lazy-load="true" class="icon"></image><text>分享</text></button></view>
			<view class="col-3 chi"><view v-if="detail.is_cang == 1" @click="cancelCollect"><image src="../../static/17.png" lazy-load="true" class="icon"></image><text>取消收藏</text></view><view @click="setCollect" v-else><image src="../../static/17.png" lazy-load="true" class="icon"></image><text>收藏</text></view></view>
			<view class="col-3 chi" @click="jumpTextarea"><image src="../../static/18.png" lazy-load="true" class="icon"></image><text>评论</text></view>
		  </view>
		</view>
		<scope-box :isLogin="isLogin" @isShow="isShow"></scope-box>
	</view>
</template>

<script>
	import ComtBox from '../../components/comtbox/index.vue';
	import app from '../../common/index.js'
	export default {
		data() {
			return {
				title: '详情',
				navH: null,
				userInfo: {},
				isLogin: false,
				zxId: '',  // 当前咨询ID
				currentSwiper: 0,  // 当前item-id
				detail: {},  // 资讯详情
				topics: [],  // 详情附带的话题
				zanavts: [],
				hasRes: true,
				comts: [],  // 评论列表
				total: '',  // 评论总条数
				isTextarea: false,
				cType: 'comt',  // 类型 /评论
			}
		},
		onLoad(options) {
			this.navH = this.$store.state.navHeight;
			this.zxId = options.id;
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			if(!this.userInfo.id) {
				this.isLogin = true;
			}
			this.getDetail();
			this.getLikeAvt();
			this.getComments();
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 获取本地用户信息
			this.userInfo = uni.getStorageSync('uinfo');
			this.getDetail();
			this.getLikeAvt();
			this.getComments();
			uni.stopPullDownRefresh();
		},
		// 分享转发
		onShareAppMessage() {
			return {
				title: this.detail.title,
				path: 'pages/detail/index?id='+ this.zxId,
			}
		},
		components: {
			ComtBox,
		},
		methods: {
			/**
			 * @des 登录提示框
			 */
			isShow() {
				this.isLogin = false;
			},
			/**
			 * @des 获取资讯详情
			 */
			getDetail() {
				app.request({
					url: 'entry/wxapp/zxinfo',
					data: {
						id: this.zxId,
						user_id: this.userInfo.id,
					}
				}, (ret) => {
					console.log(ret);
					let d = ret.data;
					this.detail = d;
					this.topics = d.topic_id;
				})
			},
			/**
			 * @des 关注
			 */
			setFllow() {
				if(this.isFllow == 1) return;
				app.request({
					url: 'entry/wxapp/Attention',
					data: {
						guan_user: this.userInfo.id,
						bguan_user: this.detail.store_id,
					}
				}, (ret) => {
					let d = ret.data;
					this.detail.is_attention = 1;
				})
			},
			/**
			 * @des 点赞
			 */
			setLike() {
				let tmpDetail = this.detail;
				app.request({
					url: 'entry/wxapp/ZxLike',
					data: {
						zx_id: this.zxId,
						user_id: this.userInfo.id,
					}
				}, (ret) => {
					let d = ret.data;
					if (d.status == 1) {
						tmpDetail.is_zan = 1;
						tmpDetail.zan = parseInt(tmpDetail.zan) + 1;
						this.detail = tmpDetail;
						this.getLikeAvt();
					} else {
						uni.showToast({
						  title: d.msg || '系统繁忙，请稍后重试',
						})
					}
				})
			},
			/**
			 * @des 收藏
			 */
			setCollect() {
				app.request({
					url: 'entry/wxapp/Collection',
					data: {
						zx_id: this.zxId,
						user_id: this.userInfo.id,
					}
				}, (ret) => {
					let d = ret.data;
					if (d.status == 1) {
						this.detail.is_cang = 1;
					} else {
						uni.showToast({
						  title: d.msg || '系统繁忙，请稍后重试',
						})
					}
				})
			},
			/**
			 * @des 取消收藏
			 */
			cancelCollect() {
				app.request({
					url: 'entry/wxapp/CancelCollection',
					data: {
						zx_id: this.zxId,
						user_id: this.userInfo.id,
					}
				}, (ret) => {
					console.log(ret);
					let d = ret.data;
					if (d.status == 1) {
						this.detail.is_cang = 0;
					} else {
						uni.showToast({
						  title: d.msg || '系统繁忙，请稍后重试',
						})
					}
				})
			},
			/**
			 * @des 点赞会员
			 */
			getLikeAvt() {
				app.request({
					url: 'entry/wxapp/ZxLikeList',
					data: {zx_id: this.zxId}
				}, (ret) => {
					let d = ret.data;
					this.zanavts = d;
				})
			},
			/**
			 * @des 获取评论列表
			 */
			getComments() {
				app.request({
					url: 'entry/wxapp/ZxPlList',
					data: {
						zx_id: this.zxId,
						page: 1,
						pagesize: 5,
					}
				}, (ret) => {
					console.log(ret);
					let d = ret.data;
					if(d.total > 0) {
						this.hasRes = true;
						this.total = d.total;
						this.comts = d.data;
					}else {
						this.hasRes = false;
					}
				})
			},
			/**
			 * @des 刷新评论
			 */
			freshComments() {
				this.comts = [];
				app.request({
					url: 'entry/wxapp/ZxPlList',
					data: {
						zx_id: this.zxId,
						page: 1,
						pagesize: 5,
					}
				}, (ret) => {
					console.log(ret);
					let d = ret.data;
					this.total = d.total;
					this.comts = d.data;
				})
			},
			/**
			 * @des 打开话题详情
			 */
			goTopic(id) {
				uni.navigateTo({
					url: '../topic/index?id='+ id
				})
			},
			/**
			 * @des 打开品论列表
			 */
			goComments() {
				uni.navigateTo({
					url: '../comments/index?id='+ this.zxId
				})
			},
			/**
			 * @alias 
			 */
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			/**
			 * @description 打开评论框
			 */
			jumpTextarea() {
				if(this.isTextarea) {
					this.isTextarea = false;
				}else {
					this.isTextarea = true;
				}
			},
			close() {
				this.isTextarea = false;
			},
			/**
			 * @des 去首页
			 */
			goHome() {
				uni.switchTab({
					url: '../index/index'
				})
			},
			/**
			 * @des 处理错误图片
			 */
			imgError() {
				let tmpDetail = this.detail;
				tmpDetail.logo = '../../static/avatars_default.png';
				this.detail = tmpDetail;
			},
			imgError2(i, t) {
				let tmpZanavats = this.zanavts, tmpComts = this.comts;
				if(t === 'zan') {
					tmpZanavats[i].user_img = '../../static/avatars_default.png';
					this.zanavts = tmpZanavats;
				}else if(t === 'comt'){
					tmpComts[i].user_img = '../../static/avatars_default.png';
					this.comts = tmpComts;
				}
			},
			
		}
	}
</script>

<style>
	.swiper {position: relative; width: 100%; background-color: #f3f8f8;}
	.swiper image {position: relative; top: 50%; transform: translateY(-50%);}
	swiper {height: 725upx; overflow: hidden;}
	video {width: 100%; max-height: 1000upx; margin-bottom: -40upx;}
	.dots {display: flex; flex-direction: center; position: absolute; left: 50%; transform: translateX(-50%); padding: 30upx 0;}
	/*未选中时的小圆点样式 */
	.dot {width: 18upx; height: 18upx; border-radius: 100%; margin-right: 15upx; background-color: rgba(0,0,0,.1);}
	/*选中以后的小圆点样式  */
	.active {width: 18upx; height: 18upx; background-color: #82d7d0;}
	
	.nocont {margin-top: 80upx;}
	/** 话题 **/
	.topics {padding: 50upx 20upx 10upx; text-align: left;}
	.topics .i {display:inline-block; height: 52upx; border-radius: 50upx; margin-right: 30upx; padding: 0 22upx; background-color: #e6f7f6;}
	.topics .i .icon {display: inline-block; width: 34upx; height: 34upx; line-height: 36upx; margin: 10upx 10upx 0 0; text-align: center; color: #fff; border-radius: 100%; background-color: #82d7d0;}
	.topics .i text {line-height: 30upx; font-size: 26upx; color: #82d7d0;}
	/** 设置喜欢 **/
	.setlike {width: 100%; margin: 30upx 0; text-align: center;}
	.setlike image {width: 140upx;}
	/** 浏览统计 **/
	.view-count {padding: 0 20upx;}
	.view-count .i {display: inline-block; width: 33%;}
	.view-count .i1 {text-align: left;}
	.view-count .i2 {text-align: center;}
	.view-count .i3 {text-align: right;}
	.view-count .i image {width: 34upx; margin-right: 10upx;}
	.view-count .i text {color: #999;}
	/** 点赞会员头像 **/
	.avat {width: 100%; margin-top: 20upx; padding: 30upx 0 30upx 16upx; background-color: #f4f4f4;}
	.avat .icon {display: inline-block; width: 80upx; border: 1px solid #eee; border-radius: 100%; float: left;}
	.scroll-view-x {width: 100%; height: 80upx; white-space: nowrap; text-align: left;}
	.scroll-view-item-h {display: inline-block; margin: 0 6upx;}
	/** 底部工具栏 **/
	.tools {position: fixed; bottom: 0; display: block; width: 100%; height: 91upx; border-top: 1px solid #ddd; background-color: #fff;}
	.tools .chi {position: relative; border-right: 1px solid #eee; text-align: center; vertical-align: middle;}
	.tools .chi:nth-child(4) {height: 91upx; border: 0; background-color: #82d7d0;}
	.tools .chi:nth-child(4) text {line-height: 91upx; color: #fff;}
	.tools .chi .icon {width: 30upx; height: 28upx; margin-right: 10upx;}
	.tools .chi text {color: #666; vertical-align: middle;}
	.tools .share {border: 0; line-height: 1; padding: 0;}
</style>
